<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><h2 style="padding-right: 10px;"><img src="../images/用户统计 (2).png" alt="" style="width: 24px;margin-right: 2.5px;margin-bottom:5px;">用户统计</h2></div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="divnum_1"  class="layui-col-xs9 layui-col-md9 top-panel-number">
                            
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                        
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><h2 style="padding-right: 10px;"><img src="../images/订单统计 (3).png" alt="" style="width: 24px;margin-right: 2.5px;margin-bottom:7.5px;">订单统计</h2></div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="divnum_2"  class="layui-col-xs9 layui-col-md9 top-panel-number">
                           
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><h2 style="padding-right: 10px;"><img src="../images/007-vegetables.png" alt="" style="width: 24px;margin-right: 2.5px;margin-bottom:6px;">菜品统计</h2></div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="divnum_3" class="layui-col-xs9 layui-col-md9 top-panel-number">
                            
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                           
                        </div>
                    </div>
                </div>
            </div>

        </div>  
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header"><h2 style="padding-right: 20px;"><img src="../images/今日营销数据.png" alt="" style="width: 24px;margin-right: 2.5px;margin-bottom:4.5px;">今日营销</h2></div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div id="divnum_4"  class="layui-col-xs9 layui-col-md9 top-panel-number">
                           
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a id="bettery"  style="color: #1aa094"></a><br>
                            <!-- 比七日 <a id="betterseven"  style="color: #bd3004"></a> -->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

     

    <div class="layui-row layui-col-space15" >
        <div class="layui-col-xs12 layui-col-md12">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div> 
    

</div>
<!--</div>-->
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/countup.js"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            count=layui.count;
            echarts = layui.echarts;
                
            function getMonthFromDate(dateString) {
            const date = new Date(dateString);
            return date.getMonth() + 1; // 月份从0开始，所以需要加1
            }
            //nowmonth= order.orderTime.slice(5,7).includes('0')==true?order.orderTime.slice(5,7).slice(1,2):order.orderTime.slice(5,7);
            //勾石截取

            // 创建一个新的 Date 对象，它会自动设置为当前日期和时间  
            var now = new Date();  

                // 获取当前年份  
            var year = now.getFullYear();  

                // 获取当前月份（注意：月份是从0开始的，所以需要加1）  
            var month = now.getMonth() + 1;  

                // 获取当前日期  
            var date = now.getDate();  

            var usercount=0;
            var ordercount;
            var varcount=0;
            var datesales=0;   
            var betteryYear=0; 
            var myorderdata=[];

            var options = {
			useEasing: true, // 过渡动画效果，默认ture
			useGrouping: true, // 千分位效果，例：1000->1,000。默认true
			separator: ',', // 使用千分位时分割符号
			decimal: '.', // 小数位分割符号
			prefix: '', // 前置符号
			suffix: '' // 后置符号，可汉字
		    }

            var options2 = {
			useEasing: true, // 过渡动画效果，默认ture
			useGrouping: true, // 千分位效果，例：1000->1,000。默认true
			separator: ',', // 使用千分位时分割符号
			decimal: '.', // 小数位分割符号
			prefix: '$', // 前置符号
			suffix: '' // 后置符号，可汉字
		    }

            var options3 = {
			useEasing: true, // 过渡动画效果，默认ture
			useGrouping: true, // 千分位效果，例：1000->1,000。默认true
			separator: ',', // 使用千分位时分割符号
			decimal: '.', // 小数位分割符号
			prefix: '▲', // 前置符号
			suffix: '' // 后置符号，可汉字
		    }

            var options4 = {
			useEasing: true, // 过渡动画效果，默认ture
			useGrouping: true, // 千分位效果，例：1000->1,000。默认true
			separator: ',', // 使用千分位时分割符号
			decimal: '.', // 小数位分割符号
			prefix: '▼', // 前置符号
			suffix: '' // 后置符号，可汉字
		    }
  
            

           totalcount();  
            
           function totalcount(){
              setTimeout(function(){renderOption();},1250); 

            $.ajax({
                type:"get",
                url:"http://localhost:8080/restaurant_web_war_exploded/user/listUsers",   
                success:function (res){      
                    if(res.errorCode==200){
                        usercount=res.data.list.length;
                        showtotalcount();
                    }
                }   
            })      

            $.ajax({
                type:"get",
                url:"http://localhost:8080/restaurant_web_war_exploded/variety/listVariety",   
                success:function (res){
                      varcount=res.data.list.length;
                      showtotalcount();
                }
            })      

            $.ajax({    
                type:"get",
                url:"http://localhost:8080/restaurant_web_war_exploded/orders/listOrders",   
                success:function (res){
                    ordercount=res.data==null?0:res.data.list.length;
                    let mon=month<10?('0'+month):month;
                    let dat=date<10?('0'+date):date;
                    let ydat=date<10?('0'+date-1):date-1;
                    let nowdate=year+"-"+mon+"-"+dat;
                    let yeardate=year+"-"+mon+"-"+ydat;
                    let yearincome=0;

                    let monthCounts = {product: '2024年订单数量每月报表', '1月': 0, '2月': 0, '3月': 0,'4月':0,'5月':0,'6月':0,'7月':0,'8月':0,'9月':0,'10月':0,'11月':0,'12月':0};
                    if(res.data!=null){
                        let list=res.data.list;
                    for (let order of list) {
                        if(nowdate===order.orderTime.substring(0,10)){
                            datesales+=order.orderPays;//统计今日订单总价
                            showtotalcount();
                        }
                        if(yeardate===order.orderTime.substring(0,10)){
                            yearincome+=order.orderPays;//昨日营销
                        }
                        let month=getMonthFromDate(order.orderTime)+"月" ;
                        // 如果月份还没有在对象中，则初始化为0  
                        if (!monthCounts[month]) {  
                            monthCounts[month] = 0;  
                        }  
                                
                        // 增加月份计数  
                        monthCounts[month]++; 
                    }
                        myorderdata.push(monthCounts);
                        // renderOption();
                        // setTimeout(function(){renderOption();},1250); 
                    }else{
                        datesales=0;
                        showtotalcount();
                    }
                    // (B - A) / A
                    
                    var smallnum;
                    if(yearincome!=0){
                     smallnum= (datesales-yearincome)/yearincome;//计算今昨天的收入比例
                    }
                     smallnum=0;
                    if(Number.isInteger(smallnum)){
                    //    console.log("整数......."); 
                    let mybetter=(smallnum).toFixed(1);//去除整数变0,保留两位小数       

                        betteryYear=mybetter;
                        showtotalcount();
                        return false;
                    }//今昨天收入整除的情况
                    // let mybetter=(smallnum- Math.floor(smallnum)).toFixed(1);//去除整数变0,保留两位小数
                    // console.log(mybetter);
                    betteryYear=parseFloat(smallnum);//赋值
                    showtotalcount();
                }
            })  
        }
           //获取所有统计值  

           function showtotalcount(){
            // dom节点, 初始值,  结束值, 小数位数, 过渡几秒 , 初始参数
            var num1 = new CountUp('divnum_1', 0, usercount,0,6,options);  
            var num2 = new CountUp('divnum_2', 0, ordercount,0,4,options);          
            var num3 = new CountUp('divnum_3', 0, varcount,0,6,options);        
            var num4 = new  CountUp('divnum_4', 0, datesales,0,6,options2);        

            var numbettery=new CountUp('bettery',0,betteryYear,1,6,options3);


            $(document).ready(function() {  
                setTimeout(function(){ // DOM加载完成的代码  
                num1.start();// 44...开启滚动 
                num2.start();
                num3.start();
                num4.start();
                numbettery.start();
                },1000); 
            });
          }
           //滚动显示统计值 

          //$(document).ready>window.onload>document.addEventListener 优先级

          function renderOption(){
           var echartsRecords = echarts.init(document.getElementById('echarts-dataset'), 'walden');

                /**
                 * 柱状图
                 */
                var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

                var optionDataset = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source:myorderdata
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {type: 'bar',color:'#99CCFF'},
                        {type: 'bar',color:'#6699CC'},
                        {type: 'bar',color:'#336699'},
                        {type: 'bar',color:'#0099CC'},
                        {type: 'bar',color:'#CCFFFF'},
                        {type: 'bar',color:'#CCFF99'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                };  

                echartsDataset.setOption(optionDataset);  
                        // echarts 窗口缩放自适应
                window.onresize = function () {
                    echartsRecords.resize();
                }
       }
          //报表渲染
    });
</script>
</body>
</html>
